<template>
    <div class="merchand">
        <ul>
            <li v-for="lis in list" :key="lis.id">
                <img :src="lis.src">
                <div class="boxs">
                    <div class="div1">{{lis.name}}</div>
                    <div class="div2">{{lis.price}}</div>
                    <div class="div3">
                        <p class="p1">{{lis.phtysical}}</p>
                        <p class="p2">{{lis.Similar}}</p>
                    </div>
                </div>

            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'Merchandise',
    data() {
        return {
            list: [
                { id: 1, src: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/91766/10/25001/80893/63438a04E0a1dc9a8/15f5a852eec13585.jpg!q70.dpg.webp', name: '志高(CHIGO)全自动洗衣机 波轮宿舍迷你...', price: '￥568.00', phtysical: '自营', Similar: '看相似' }, 
                { id: 2, src: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/182647/24/11115/110998/60d57b88E6aca08f0/514179dd1073acea.jpg!q70.dpg.webp', name: '焦色头保温杯盖防漏通用开关配件保温壶盖...', price: '￥22.00', phtysical: '自营', Similar: '看相似' }, 
                { id: 3, src: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/171593/32/29806/121709/6319c962Ea2c87a6d/32c6ac8e24464693.jpg!q70.dpg.webp', name: '志高(CHIGO)全自动洗衣机 波轮宿舍迷你...', price: '￥568.00', phtysical: '自营', Similar: '看相似' }, 
                { id: 4, src: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/216741/1/20294/93855/6321c0e6Eda7bc5a0/5be2396aecd8fd10.jpg!q70.dpg.webp', name: '志高(CHIGO)全自动洗衣机 波轮宿舍迷你...', price: '￥568.00', phtysical: '自营', Similar: '看相似' }, 
                { id: 5, src: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/8455/19/20847/183910/634d046dE8e960706/a3f5a8228b8d91d4.jpg!q70.dpg.webp', name: '志高(CHIGO)全自动洗衣机 波轮宿舍迷你...', price: '￥568.00', phtysical: '自营', Similar: '看相似' }, 
                { id: 6, src: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/1952/10/19403/127403/62e0e2c5Ee08565cd/2235bef9ac2f19a7.jpg!q70.dpg.webp', name: '志高(CHIGO)全自动洗衣机 波轮宿舍迷你...', price: '￥568.00', phtysical: '自营', Similar: '看相似' }, 
                { id: 7, src: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/91766/10/25001/80893/63438a04E0a1dc9a8/15f5a852eec13585.jpg!q70.dpg.webp', name: '志高(CHIGO)全自动洗衣机 波轮宿舍迷你...', price: '￥568.00', phtysical: '自营', Similar: '看相似' }, 
                { id: 8, src: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/204000/30/24880/539552/62d137ecE476792ca/0f3dfffb6faccea1.jpg!q70.dpg.webp', name: '志高(CHIGO)全自动洗衣机 波轮宿舍迷你...', price: '￥568.00', phtysical: '自营', Similar: '看相似' }, 
                { id: 9, src: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/158134/32/31313/84159/634a7f6eEb7dd3264/a912923b2f9b8982.jpg!q70.dpg.webp', name: '志高(CHIGO)全自动洗衣机 波轮宿舍迷你...', price: '￥568.00', phtysical: '自营', Similar: '看相似' }, 
                { id: 10, src: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/28804/11/20080/178009/634cf580Ed3b9c6a6/6095f3e489bb07d4.jpg!q70.dpg.webp', name: '志高(CHIGO)全自动洗衣机 波轮宿舍迷你...', price: '￥568.00', phtysical: '自营', Similar: '看相似' }
            ]
        }
    }
}
</script>

<style scoped lang="less">
.merchand {
    
    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        li {
            width: 340px;
            height: 600px;
            border-radius: 20px;
            background-color: #fff;
            overflow: hidden;
            margin: 10px;
            img {
                width: 100%;
                height: 340px;
            }

            .boxs {
                display: flex;
                flex-direction: column;
                padding: 0 10px;
                margin-top: 20px;
                .div1 {
                    height: 84px;
                    font-size: 32px;
                    margin-bottom: 20px;
                }

                .div2 {
                    height: 64px;
                    color: red;
                    font-size: 40px;
                }

                .div3 {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    p{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    .p1 {
                        width: 80px;
                        height: 28px;
                        background-color: #FF4142;
                        font-size: 12px;
                        color: #fff;
                        border-radius: 8px;
                    }

                    .p2 {
                        width: 100px;
                        height: 40px;
                        background-color: #f6f6f6;
                        border-radius: 20px;
                        font-size: 20px;
                    }
                }
            }

        }
    }
}
</style>